<template>
	<view class="year-container">
		<view class="inner-month-container">
			<view class="inner-month-container-last-month">
				<view class="inner-month-container-last-month-icon-bgc-container" @click="changeYear(-1)">
					<view class="inner-month-container-last-month-icon-item iconfont icon-xiangzuo"></view>
				</view>
			</view>
			<view class="inner-month-container-this-month">{{year}}</view>
			<view class="inner-month-container-next-month">
				<view class="inner-month-container-next-month-icon-bgc-container" @click="changeYear(1)">
					<view class="inner-month-container-next-month-icon-item iconfont icon-xiangyou1"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
		props: {
			year: {
				type: Number,
				default: -1,
			}
		},
		watch: {
			// year(old, new1) {
			// 	debugger
			// 	console.log(old)
			// }
		},
        data() {
            return {
            }
        },
		methods: {
			changeYear(num) {
				this.$emit("changeYearCallback", num);
			}
		},
		created() {
			console.log("触发了")
		}
    }
</script>

<style lang="scss">
	
	.year-container {
		height: 100%;
		width: 100%;
		
		.inner-month-container {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.inner-month-container-last-month {
				width: 25%;
				height: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
		
				.inner-month-container-last-month-icon-bgc-container {
					width: 50rpx;
					height: 100%;
					border-radius: 50%;
					background-color: $themeBtnPurpleColor;
					display: flex;
					justify-content: center;
					align-items: center;
					color: $themePurpleColor;
					.inner-month-container-last-month-icon-item {
					}
				}
			}
		
			.inner-month-container-this-month {
				width: 50%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		
			.inner-month-container-next-month {
				width: 25%;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
		
				.inner-month-container-next-month-icon-bgc-container {
					width: 50rpx;
					height: 100%;
					border-radius: 50%;
					background-color: $themeBtnPurpleColor;
					display: flex;
					justify-content: center;
					align-items: center;
					color: $themePurpleColor;
					.inner-month-container-next-month-icon-item {
		
					}
				}
			}
		
		}
		
	}
	
</style>
